<template>
  <div style="height: calc(100% - 55px);">
    <el-form
      ref="form"
      :model="form"
      label-position="top"
      label-width="90px"
      class="dv-form p-15"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="受案号" prop="sah">
            <el-input
              v-model.trim="form.sah"
              :disabled="type === 'detail' || status > 0"
              placeholder="请输入"
              :maxlength="40"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="案件名称" prop="ajmc">
            <el-input
              v-model.trim="form.ajmc"
              :disabled="type === 'detail' || status > 0"
              placeholder="请输入"
              :maxlength="40"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="嫌疑人名称" prop="xyrmc">

            <el-input
              v-model.trim="form.xyrmc"
              :disabled="type === 'detail' || status > 0"
              placeholder="请输入"
              :maxlength="40"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人数" prop="rs">
            <el-input
              v-model.trim="form.rs"
              :disabled="type === 'detail' || status > 0"
              placeholder="请输入"
              :maxlength="40"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="案由" prop="ay">
            <el-input
              v-model.trim="form.ay"
              :disabled="type === 'detail' || status > 0"
              type="textarea"
              placeholder="请输入"
              :maxlength="40"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="采取强制措施时间/种类" prop="qzcs">
            <div v-if="showFlag" class="dv-checkbox" style="left:160px">
              <el-checkbox slot="reference" v-model="checkForm.qzcsCheck" @change="(val)=>checkChange(val,'采取强制措施时间/种类','qzcsCheckValue')" />
              <el-select v-if="checkForm.qzcsCheck" v-model="checkForm.qzcsCheckValue" class="ml-10" placeholder="请选择" clearable @change="checkChange(checkForm.qzcsCheck,'采取强制措施时间/种类','qzcsCheckValue')">
                <el-option label="漏填" value="1" />
                <el-option label="错填" value="2" />
              </el-select>
            </div>
            <el-input
              v-model.trim="form.qzcs"
              :disabled="type === 'detail' || status > 0"
              placeholder="请输入"
              :maxlength="40"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="立案时间" prop="lasj">
            <div v-if="showFlag" class="dv-checkbox" style="left:70px">
              <el-checkbox slot="reference" v-model="checkForm.lasjCheck" @change="(val)=>checkChange(val,'立案时间','lasjCheckValue')" />
              <el-select v-if="checkForm.lasjCheck" v-model="checkForm.lasjCheckValue" class="ml-10" placeholder="请选择" clearable @change="checkChange(checkForm.lasjCheck,'立案时间','lasjCheckValue')">
                <el-option label="漏填" value="1" />
                <el-option label="错填" value="2" />
              </el-select>
            </div>
            <el-date-picker
              v-model="form.lasj"
              type="date"
              :disabled="type === 'detail' || status > 0"
              value-format="yyyy-MM-dd"
              class="w-100"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="法制审核人" prop="fzshr">
            <el-select
              v-model="form.fzshr"
              placeholder="请选择"
              class="w-100"
              clearable
              :disabled="type === 'detail' || status > 0"
            >
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="侦查机关及侦查人员" prop="zcjg">
            <div v-if="showFlag" class="dv-checkbox">
              <el-checkbox slot="reference" v-model="checkForm.zcjgCheck" @change="(val)=>checkChange(val,'侦查机关及侦查人员','zcjgCheckValue')" />
              <el-select v-if="checkForm.zcjgCheck" v-model="checkForm.zcjgCheckValue" class="ml-10" placeholder="请选择" clearable @change="checkChange(checkForm.zcjgCheck,'侦查机关及侦查人员','zcjgCheckValue')">
                <el-option label="漏填" value="1" />
                <el-option label="错填" value="2" />
              </el-select>
            </div>
            <el-input
              v-model.trim="form.zcjg"
              :disabled="type === 'detail' || status > 0"
              placeholder="请输入"
              :maxlength="40"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="公安机关繁简认定" prop="fjrd">
            <el-input
              v-model.trim="form.fjrd"
              type="textarea"
              :disabled="type === 'detail' || status > 0"
              placeholder="请输入"
              :maxlength="40"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model.trim="form.remark"
              :disabled="type === 'detail' || status > 0"
              type="textarea"
              placeholder="请输入"
              :maxlength="40"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="附件" prop="file">
            <file-upload ref="fileUpload" :value="form.file" :disabled="type === 'detail' || status > 0" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import fileUpload from '@/components/FileUpload'
export default {
  components: {
    fileUpload
  },
  props: {
    type: {
      type: String,
      default: 'add'
    },
    status: {
      type: Number,
      default: 0
    },
    showFlag: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      options: [{
        value: '1',
        label: '人员1'
      }, {
        value: '2',
        label: '人员2'
      }, {
        value: '3',
        label: '人员3'
      }],
      form: {
        sah: '',
        xyrmc: '',
        ay: '',
        rs: '',
        lasj: '',
        qzcs: '',
        zcjg: '',
        fzshr: '',
        fjrd: '',
        remark: '',
        file: '',
        ajbh: '',
        ajmc: ''
      },
      checkForm: {
        lasjCheck: false,
        lasjCheckValue: '',
        qzcsCheck: false,
        qzcsCheckValue: '',
        zcjgCheck: false,
        zcjgCheckValue: ''
      },
      list: []
    }
  },
  methods: {
    init() {

    },
    checkChange(val, name, key) {
      this.$nextTick(() => {
        if (val) {
          this.$store.dispatch('GetListName', { name: name, type: this.checkForm[key] })
        } else {
          this.$store.dispatch('DeleteListName', { name: name, type: this.checkForm[key] })
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
  .dv-checkbox{
    position: absolute;
    top: -35px;
    left: 140px;
    .el-select{
      width: 100px;
    }
  }
</style>
